import { useState } from "react"

// 定义弹窗类型
export enum ModalType {
  Notification = "Notification",
  StartProduce = "StartProduce",
  ErrorInfo = "ErrorInfo",
  Offline = "Offline"
}

// 基础弹窗配置
interface BaseModalConfig {
  type: ModalType
  title: string
  content: string
  visible: boolean
}

// 错误信息弹窗配置
export interface ErrorInfoModalConfig extends BaseModalConfig {
  type: ModalType.ErrorInfo
}

// 通知弹窗配置
export interface NotificationModalConfig extends BaseModalConfig {
  type: ModalType.Notification
}

// 掉线弹窗配置
export interface OfflineModalConfig extends BaseModalConfig {
  type: ModalType.Offline
}

// 弹窗配置联合类型
export type ModalConfig =
  | ErrorInfoModalConfig
  | NotificationModalConfig
  | OfflineModalConfig

const useModalModel = () => {
  const [modalList, setModalList] = useState<ModalConfig[]>([])

  const showModal = (config: ModalConfig) => {
    console.log("in showModal() ", config)
    setModalList((prevList) => {
      const filteredList = prevList.filter((modal) => modal.type !== config.type)
      const newModalList = [...filteredList, { ...config, visible: true }]
      console.log("newModalList: ", newModalList)
      return newModalList
    })
  }

  const hideModal = (type: ModalType) => {
    setModalList((prevList) => prevList.filter((modal) => modal.type !== type))
  }

  return {
    modalList,
    showModal,
    hideModal
  }
}
export default useModalModel
